.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 400px;
  overflow: hidden;

  .top {
    width: 100%;
    height: 250px;
    background-color: #1a1f47;
    // background-color: rgba(10, 10, 150, 0.5);
    border-radius: 10px;

    .top-title {
      width: 100%;
      text-align: center;
      height: 30px;
      line-height: 30px;
      color: rgb(250, 202, 10);
      font-size: 22px;
      text-shadow: 3px 1px 5px rgb(250, 202, 10);
    }

    .top-container {
      display: flex;
      justify-content: space-evenly;
      height: 220px;

      .top-list {
        width: 113px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        color: aliceblue;
        .top-list-item {
          text-align: center;
          line-height: 25px;
          i {
            font-size: 42px;
            color: rgb(12, 143, 237);
          }
          .item-num {
            color: #02a4f6;
            text-shadow: 1px 1px 2px;
            font-size: 22px;
            font-weight: bold;
          }
          .item-unit {
            color: #02a4f6;
            font-weight: bold;
            font-size: 15px;
          }
        }
      }
    }
  }

  .middle {
    width: 400px;
    height: 260px;
    background-color: #1a1f47;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .bottom {
    width: 100%;
    flex: 1;
    background-color: #1a1f47;
    border-radius: 10px;
    .bottom-content {
      overflow: hidden;
      height: 90px;
      padding-top: 20px;
      text-indent: 2rem;
      font-style: italic;
      font-size: 20px;
      font-weight: bold;
      padding-left: 10px;
      padding-right: 10px;
      color: #0c8fed;
      text-shadow: 1px 1px 5px #0c8fed;
    }
  }
}
